<template>
  <div
    v-if="list.length"
    class="preview-board"
  >
    <div
      v-for="(element,index) in list"
      :key="index"
      class="preview-board-item"
    >
      <component
        :is="element.name"
        v-model="element.options"
      />
    </div>
  </div>
</template>

<script>
import '../Draggable/components'
import BannerAdvert from '../Draggable/components/BannerAdvert'
import FenceColumn from '../Draggable/components/FenceColumn'
import GridColumn from '../Draggable/components/GridColumn'
import GuideLine from '../Draggable/components/GuideLine'
import Mission from '../Draggable/components/Mission'
import Navmenu from '../Draggable/components/Navmenu'
import Notice from '../Draggable/components/Notice'
import PlaceEmpty from '../Draggable/components/PlaceEmpty'
import Seckill from '../Draggable/components/Seckill'
import SpreadActivity from '../Draggable/components/SpreadActivity'
import Swiper from '../Draggable/components/Swiper'
export default {
  name: 'PreviewComponent',
  components: {
    BannerAdvert,
    FenceColumn,
    GridColumn,
    GuideLine,
    Mission,
    Navmenu,
    Notice,
    PlaceEmpty,
    Seckill,
    SpreadActivity,
    Swiper
  },
  provide: {
    setting: {
      defaultImage: 'https://multi.niuteam.cn/public/static/ext/diyview/img/crack_figure.png',
      msg: 'hello child'
    }
  },
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      msg: 'hello child',
      customProps: [
        {
          title: 'test'
        }
      ]
    }
  },
  watch: {
    list: {
      handler(val) {
        console.log('list: ', val)
      },
      deep: true
    }
  },
  methods: {}
}
</script>
<style lang="scss">
.em-card {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  &__toolbar {
    color: gray;
    .em-icon {
      font-size: 14px;
    }
  }
}
</style>
<style lang="scss" scoped>
.preview-board {
  display: flex;
  flex-direction: column;
  &-item {
    position: relative;
    width: 100%;
    min-height: 20px;
  }
}
</style>

